<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Circle</title>
<style>
	*{ margin:0 ; padding:0;}
	body{
		background-color:#0cc;
		text-align:center;
		}
</style>
</head>

<body>
	<canvas height="500" width="300" id="myCanvas"></canvas>
    <script>
    	window.onload=function(){
			var myCanvas=document.getElementById("myCanvas");
			var centerX=myCanvas.width/2;
			var centerY=myCanvas.height/2;
			var context=myCanvas.getContext("2d");
			var per=Math.PI*2/100;
			var speed=0.1;
			
			
			function bottomCircle(){
				context.save();
				context.beginPath();
				context.strokeStyle="white";
				context.arc(centerX,centerY,100,0,Math.PI*2);
				context.stroke();
				context.closePath();
				context.restore();
			}
			function topCircle(n){
				context.save();
				context.beginPath();
				context.strokeStyle="#fff";
				context.lineWidth=8;
				context.arc(centerX,centerY,100,-Math.PI/2,-Math.PI/2+n*per,false);
				context.stroke();
				context.closePath();
				context.restore();
			}
			function centerText(n){
					context.save();
					context.beginPath();
					context.strokeStyle="#fff";
					context.font="40px Arial";
					context.strokeText(n.toFixed(0)+"%",centerX-25, centerY+10);
					context.stroke();
					context.closePath();
					context.restore();
			}
			function drawCircle(){
				window.requestAnimationFrame(drawCircle,myCanvas);
				context.clearRect(0, 0, myCanvas.width, myCanvas.height);
				bottomCircle();
				topCircle(speed);
				centerText(speed);
				if(speed<=100){
					speed+=0.1;
				}else{
					speed=0;
				}
			}
			drawCircle();
		}
    </script>
</body>
</html>
